<template>
  <div class="login">
    <!-- <div class="phone"><img src="../assets/头部.png" alt="" /></div> -->
    <div class="headPortrait">
      <img src="../assets/编组@2x.png" alt="" />
    </div>
    <div class="userMsgBox">
      <div class="userName">
        <input type="text" placeholder="请输入账号" v-model="username" />
      </div>
      <div class="userPassword">
        <input type="password" placeholder="请输入密码" v-model="password" />
      </div>
    </div>
    <div class="btnBox">
      <button @click="login">登陆</button>
      <!-- <div class="reBtn">
        <router-link to="/register">立即注册</router-link>
        <a href="#">忘记密码</a>
      </div> -->
    </div>
  </div>
  <Other-toast v-show="show" :msg="msg"></Other-toast>
  <!-- <sliderCaptcha></sliderCaptcha> -->
</template>

<script setup>
import { ref } from "vue";
import { post } from "../utils/request";
import { useRouter } from "vue-router";
import Toast from "../components/Toast.vue";
import OtherToast, { useToastEffect } from "../components/OtherToast.vue";
import sliderCaptcha from "../components/SliderCaptcha.vue";
import { useStore } from "vuex";
const store = useStore();

let router = useRouter();
let username = ref("");
let password = ref("");
// 第一种 写法 不好定义不是在通用组件内部
//先去调用这个函数useToastEffect
let { show, msg, showToast } = useToastEffect();
//让我们的login.vue可以使用上面的内容
const login = async () => {
  //发送登录请求
  let res;
  try {
    //有可能出现错误的地方
    console.log(username.value);
    console.log(password.value);
    res = await store.dispatch("user/changeIsLogin", {
      phone: username.value,
      password: password.value,
    });

    console.log(res);
    // sessionStorage.setItem("token", res.data.result.token);
  } catch (error) {
    //当请求的过程中出现错误，代码执行catch函数
    //error 获取 reject的参数
    console.log(error);
    show.value = true;
    showToast("请重新登录，注意格式");
  }
  if (res.status === 200) {
    showToast("登录成功");
    router.push("/");
  }
};
const goHome = () => {
  router.push("/");
};
const goMine = () => {
  router.push("/mine");
};
</script>

<style lang="scss" scoped>
.login {
  display: flex;
  flex-direction: column;
  align-items: center;
  .phone {
    width: 100%;
    height: 20px;
  }
  .headPortrait {
    width: 0.66rem;
    height: 0.66rem;
    background-color: pink;
    margin-top: 1.2rem;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 0.4rem;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  .userMsgBox {
    margin-bottom: 0.32rem;
    .userName,
    .userPassword {
      input {
        padding: 0.12rem 0.16rem;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        color: #000000;
        font-size: 0.16rem;
        border-radius: 0.06rem;
        background-color: #f9f9f9;
        border: 1px solid rgba(0, 0, 0, 0.1);
      }
    }
    .userName {
      width: 2.95rem;
      height: 0.48rem;
      margin-bottom: 0.16rem;
    }
    .userPassword {
      width: 2.95rem;
      height: 0.48rem;
    }
  }
  .btnBox {
    button {
      width: 2.95rem;
      height: 0.48rem;
      border: none;
      border-radius: 0.04rem;
      background-color: #0091ff;
      color: #fff;
      font-size: 0.16rem;
      box-shadow: 0 4px 8px 0 rgba(0, 145, 255, 0.32);
    }
    .reBtn {
      margin-top: 0.16rem;
      display: flex;
      justify-content: center;
      a {
        font-size: 0.14rem;
        color: #000;
        opacity: 0.5;
      }
      a:first-child {
        position: relative;
        padding-right: 0.27rem;
        &::after {
          position: absolute;
          right: 0.12rem;
          top: 0.01rem;
          content: "";
          display: inline-block;
          width: 0.01rem;
          height: 0.14rem;
          background-color: #000;
          opacity: 0.5;
        }
      }
    }
  }
}
</style>
